<template>
    <view class="content">
		<view class="input-group">
			<image src="../../static/center/logo.png" mode="widthFix" class="top-left"></image>
			<view class="log-lable">
				<image src="../../static/page/forget.png" mode="aspectFit" style="height: 400upx;"></image>
			</view>
			
            <view class="log-input">
                <m-input class="input" type="text" v-model="account" :placeholder="i18n.login.mobile" maxlength="11"></m-input>
            </view>
			
            <view class="log-input">
				<m-input class="m-code" type="text" v-model="verifycode" :placeholder="i18n.code.code" maxlength="6"></m-input>
				<view class="obtain">
					<view v-if="countdown > 61" @tap="verification">{{i18n.code.obtain}}</view>
					<view v-if="countdown == 61" @tap="verification">{{i18n.code.reacquire}}</view>
					<view v-if="countdown < 61">{{countdown}} {{i18n.code.seconds}}</view>
				</view>
            </view>
			
            <view class="log-input">
                <m-input class="input" type="password" displayable v-model="pwd" :placeholder="i18n.login.newpass" maxlength="6"></m-input>
            </view>
			
            <view class="log-input">
                <m-input class="input" type="password" displayable v-model="repwd" :placeholder="i18n.login.repass" maxlength="6"></m-input>
            </view>
        </view>
		
        <view class="btn-row">
			<block v-if='status == 1'>
				<view type="primary" class="primary1" @click="forget()">
					{{i18n.login.forget2}}
				</view>
			</block>
			
			<block v-else>
				<view type="primary" class="primary1">
					{{i18n.login.forget2}}
				</view>
			</block>
        </view>
		
		<view class='memory'>
			<view class="login" @tap="back">{{i18n.reg.login}}</view>
		</view>
		
		<image :src="back_img" mode="" class="back_img" :style="height"></image>
    </view>
</template>

<script>
    import service from '../../service.js';
    import mInput from '../../components/m-input.vue';
	import mIcon from '../../components/m-icon/m-icon.vue';

    export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
        components: {
            mInput,
			mIcon
        },
        data() {
            return {
				back_img:uni.getStorageSync('page'),
				height:uni.getStorageSync('height'),
                providerList: [],
                hasProvider: false,
                account: '',
				verifycode:'',
                pwd: '',
                repwd: '',
				countdown:62,
				status:1,
                positionTop: 0
            }
        },
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.pages.forget
			});
			uni.getSystemInfo({
				success: (res) => {
					var heig = res.windowHeight;
					this.height = 'height:'+heig+'px;';
				}
			});
		},
        methods: {
			back(){
				uni.reLaunch({
					url: '/pages/login/login',
				});
			},
			verification(){
				self = this;
				if(self.account.length != 11){
					uni.showToast({
						icon: 'none',
						title: self.i18n.login.number
					});
					return;
				}
				
				//手機號碼正則驗證
				if(!(/^1[3-9][0-9]\d{8,11}$/.test(self.account))){
					uni.showToast({
						icon: 'none',
						title: self.i18n.login.regular
					});
					return;
				}
				//發送短信驗證碼
				service.upload(this, service.api.reg.code, {
					'account': self.account
				}, '', '', function(self, res) {
					uni.showToast({
						icon: 'none',
						title: res.info
					});
					if (res.code == 1) {
						self.codetime(self,60);
					}
				});
			},
			//手機驗證碼獲取倒計時
			codetime: function(obj,num) {
				if(num<10){
					obj.countdown = "0"+num;
				}else{
					obj.countdown = num;
				}
				num--;
				if(num < 0){
					obj.countdown = 61;
				}else{
					setTimeout(function(){
						obj.codetime(obj,num);
					}, 1000);
				}
			},
			forget(){
				self = this;
				if(self.verifycode.length < 6){
					uni.showToast({
						icon: 'none',
						title: self.i18n.code.verification
					});
					return;
				}
				if(self.pwd !== self.repwd){
					uni.showToast({
						icon: 'none',
						title: self.i18n.login.cons
					});
					return;
				}
				self.status = 0;
				service.upload(this, service.api.login.forget, {
					'account': self.account,
					'code': self.verifycode,
					'password': self.pwd,
					'repassword': self.repwd
				}, '', '', function(_self, res) {
					if (res.code == 1) {
						uni.showModal({
							title: self.i18n.login.success,
							content: res.info,
							showCancel: false,
							success: function(res) {
								self.back();
							}
						});
					}else{
						self.status = 1;
						uni.showModal({
							title: self.i18n.login.fail,
							content: res.info,
							showCancel: false,
							success: function(res) {
								
							}
						});
					}
				});
			}
        }
    }
</script>

<style>
	.log-lable{
		margin: -100upx 0 0;
	}
	.m-input-view{
		margin-right: 0;
	}
</style>